<template>
    <div class="voiceChannelMonitor">
        <div>
            <!-- 语音通道监控 -->
            <div class="formContainer">
                <!-- 搜索表单模块 -->
                <el-form :inline="true" :model="formData" class="demo-form-inline" size="small">
                    <el-row class="el_row_left">
                        <el-form-item label="中继号">
                            <el-input v-model="formData.queryTrunk" placeholder="请输入中继号"></el-input>
                        </el-form-item>
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-search"
                            @click="handleSearch"
                            :loading="searchLoading"
                        >查 询</el-button>
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-refresh-right"
                            @click="handleReset"
                            :loading="resetLoading"
                        >重 置</el-button>
                    </el-row>
                </el-form>
            </div>
            <!-- 表格数据展示模块 -->
            <el-table :data="tableData" width="100%" stripe border class="heard-bg">
                <el-table-column label="中继组" prop="trunkGroup"></el-table-column>
                <el-table-column label="中继名" prop="trunkName"></el-table-column>
                <el-table-column label="通话数" prop="usings"></el-table-column>
                <!--<el-table-column label="中继通话" prop="trunkCallList"></el-table-column>-->
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <div class="text_a" @click="handleDetails(scope.row)">详情</div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--<Pagination-->
        <!--:hanleChangeCurrentPage="hanleChangeCurrentPage"-->
        <!--:handleChangeSize="handleChangeSize"-->
        <!--:total="total"-->
        <!--:pageSize="pageSize"-->
        <!--:currentPage="currentPage"-->
        <!--/>-->

        <el-dialog
            v-drag
            :close-on-click-modal="false"
            :visible.sync="Show"
            append-to-body
            center
            width="800px"
            @close="handleClose"
        >
            <div slot="title">{{ EditTitle }}</div>
            <el-table :data="tableDataDetails" width="100%" stripe border class="heard-bg">
                <el-table-column label="中继号码" prop="trunkMember"></el-table-column>
                <el-table-column label="通话开始时间" prop="callBeginTime"></el-table-column>
                <el-table-column label="呼叫标识" prop="callId"></el-table-column>
                <el-table-column label="主叫号码" prop="ani"></el-table-column>
                <el-table-column label="被叫号码" prop="dnis"></el-table-column>
                <el-table-column label="呼叫类型" prop>
                    <template slot-scope="scope">
                        <div>{{scope.row.callType==='CT_Inbound'?'呼入':'呼出'}}</div>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleClose" class="cancelBtn">关 闭</el-button>
            </div>
            <Pagination
                :hanleChangeCurrentPage="hanleChangeCurrentPage"
                :handleChangeSize="handleChangeSize"
                :total="total"
                :pageSize="pageSize"
                :currentPage="currentPage"
            />
        </el-dialog>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination/Pagination.vue';
import PageTitle from '@/components/pageTitle/PageTitle.vue';


export default {
    name: 'voiceChannelMonitor',
    components: {
        Pagination,
        PageTitle,
    },
    data() {
        return {
            Show: false,
            EditTitle: '',
            currentPage: 1, // 当前分页
            pageSize: 10, // 每页数量
            total: 0, // 数据总数
            // 搜索loading
            searchLoading: false,
            // 重置loading
            resetLoading: false,
            formData: { // 搜索表单字段
                queryTrunk: '',
            },
            // 表格数据
            tableData: [],
            // 详情表格数据
            tableDataDetails: [],
        };
    },
    mounted() {
        this.getInitData(this.formData);
    },
    methods: {
        // 获取用户表格数据
        getInitData(form) {
            let params = {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
                queryTrunk: this.formData.queryTrunk,
            };
            params = Object.assign({}, params, form);
            this.$post.kpi.getVoiceChanelData(params)
                .then((res) => {
                    if (res.data.success) {
                        this.tableData = res.data.content.trunkList.eventData;
                    }
                });
        },

        // 点击查询
        handleSearch() {
            this.currentPage = 1;
            this.getInitData();
        },

        // 点击重置搜索表单
        handleReset() {
            this.$refs.searchForms.resetFields();
            this.currentPage = 1;
            this.getInitData();
        },

        // 点击详情
        handleDetails(row) {
            this.EditTitle = '通话详情';
            this.Show = true;
            this.tableDataDetails = row.trunkCallList;
        },

        handleClose() {
            this.Show = false;
        },

        // 切换分页大小
        handleChangeSize(val) {
            this.pageSize = val;
            // 重置页码
            this.currentPage = 1;
            this.getInitData();
        },

        // 切换页码
        hanleChangeCurrentPage(val) {
            this.currentPage = val;
            this.getInitData();
        },

    },
};
</script>
<style lang="scss">
.voiceChannelMonitor {
    .searchForm {
        .el-select,
        .el-date-editor {
            width: 100%;
            max-width: 200px;
        }
    }
    .el_row_left {
        text-align: left;
        margin-left: 30px;
    }
}
</style>
<style lang="scss" scoped>
.voiceChannelMonitor {
    height: 100%;
    padding: 20px;
    background-color: #fff;

    .formContainer .el-input__inner {
        width: 100%;
        max-width: 200px;
    }
}
</style>
